<template>
	<view>
		<view class="scrollViewContent" id="scrollViewContent" :style="{height: height + 'px'}">
			<scroll-view class="scrollview" id="scrollview" scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="loadPage"
				:style="{height: contentViewHeight + 'px'}">
				<view id="msglistview">
					<view class="chattTime">
					</view>
					<!-- 聊天 -->
					<view v-for="(item,idx) in chatList" :key="idx" :class="item.fromUser !== 0?'chatself':'chatother'">
						<image v-if="item.fromUser !== 0" src="/static/icon/home-checked.png"
							style="width: 80rpx;height: 80rpx;margin-left: 20rpx;">
						</image>
						<image v-else src="/static/icon/home-checked.png" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;">
						</image>
						<image v-if="item.type == 1" class="image" :src="item.content" mode=""></image>
						<view v-else :class="item.fromUser !== 0?'chatbgvS':'chatbgvO'">{{item.content}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="chatinput">
			<u-upload @afterRead="afterRead" :maxCount="1" style="width: 50rpx;height:50rpx;" height="50" width="50">
				<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/upload.png"
					style="width: 50rpx;height: 50rpx;margin: 0rpx 20rpx;" />
			</u-upload>
			<u-input class="inputtext" type="text" placeholder="输入要说的内容" v-model="inputValue" @change="changeInp" />
			<!-- <image src="/static/icon/go.png" style="width: 38rpx;height: 38rpx;margin:0rpx 20rpx;" @click="sendMsgs" /> -->
			<view class="loading_btn" @click="sendMsgs">
				发送
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth'
	export default {
		data() {
			return {
				height: 0,
				chatList: [],
				inputValue: '',
				timer: null,
				lastMsgId: '',
				images: '',
				type: 0,
				scrollTop: '',
				page: 1,
				size: 50,
				isLoadPage: false

			}
		},
		onLoad() {
			this.getMsgs()
			this.timer = setInterval(() => {
				this.getNewMsg()
			}, 5000)
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null;
		},
		created() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			this.windowH = res.windowHeight;
			this.contentViewHeight = (405 * this.windowH / 440); //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			this.height = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight;
			this.scrollToBottom();
		},
		updated() {
			//调用滚动到底部的方法
			this.scrollToBottom();
		},
		methods: {
			loadPage() {
				if (this.isLoadPage == false) {
					this.page += 1
					// 加载中 执行加载事件
					this.getMsgs()
				}
			},
			//设置页面滚动到底部
			scrollToBottom() {
				let that = this
				that.$nextTick(function() {
					setTimeout(() => {
						let query = uni.createSelectorQuery()
						query.select('#scrollview').boundingClientRect()
						query.select('#msglistview').boundingClientRect()
						query.exec((res) => {
							//获取所有内部子元素的高度
							//判断子元素高度是否大于显示高度
							if (res[1].height > res[0].height) {
								// 用子元素的高度减去显示的高度就获益获得滚动的高度
								that.scrollTop = res[1].height - res[0].height + (20 * this.windowH / 568)
							}
						})
					}, 50)
				});
			},
			changeInp(e) {
				if (e != '') {
					this.type = 0
					this.images = ''
				}
			},
			async afterRead(event) {
				this.inputValue = ''
				this.type = 1
				let result = await this.$tools.uploadImage(event.file.url)
				this.images = result.data;
				// this.images = 'https://youpindou.com:8063/doudougou/image/showImg?imgUrl=/home/ddg/images/3c9205c9-ae77-48d4-9eae-db3973831884.jpg';
				if (!this.images) return
				this.type = 1
				this.sendMsgs()
			},
			getMsgs() {
				let info = getUserInfo()
				const param = {
					page: {
						current: this.page,
						size: this.size,
					},
					query: {
						fromUser: 0,
						toUser: info.userId
					}
				};
				let page = this.page
				this.$request.getMsg(param).then(res => {
					if (res.code == 200 && res.data.records.length > 0) {
						console.log(res.data.pages)
						let arr = res.data.records
						if (page == 1) {
							this.chatList = res.data.records
							this.lastMsgId = arr[arr.length - 1].id;
						} else {
							let newArr = [...arr, ...this.chatList]
							this.chatList = newArr
							if (res.data.total == this.chatList.length) {
								this.isLoadPage = true
								return
							}
						}

					}
				})
			},
			getNewMsg() {
				let info = getUserInfo()
				const param = {
					toUserId: info.userId,
					lastMsgId: this.lastMsgId ? this.lastMsgId : 0
				};
				this.$request.getNewMsg(param).then(res => {
					if (res.code == 200 && res.data.length > 0) {
						this.getMsgs()
					}
				})
			},
			sendMsgs() {
				let info = getUserInfo()
				if (this.type == 0) {
					if (this.inputValue.trim() == '') return this.$toast('输入要说的内容')
				}
				const query = {
					content: this.type == 0 ? this.inputValue : this.images,
					fromUser: info.userId,
					toUser: 0,
					type: this.type
				};
				this.$request.sendMsg(query).then(res => {
					if (res.code == 200) {
						this.inputValue = ''
						this.images = ''
						this.page = 1
						this.isLoadPage = false
						this.getMsgs()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F7F9;
	}

	.scrollViewContent {
		width: 100%;

		.scrollview {
			width: 100%;

			.content {
				width: 94%;
				background-color: #ffffff;
				margin-left: 3%;
				margin-top: 36rpx;
				padding-bottom: 36rpx;
				border-radius: 30rpx;
				padding-top: 49rpx;

				.jianliXz {
					img {
						width: 20px;
						height: 20px;
						object-fit: contain;
					}
				}

				.userInfo {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 50rpx;
					padding-right: 40rpx;

					.name {
						font-size: 42rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1b1e27;
					}

					.job_zhiwei {
						margin-top: 11rpx;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #797a7f;
					}

					.imgs {
						.sex {
							position: absolute;
							margin-top: 10rpx;
							margin-left: 100rpx;

							img {
								width: 16px;
								height: 16px;
								object-fit: contain;
							}
						}

						.userImg {
							img {
								width: 130rpx;
								height: 130rpx;
								object-fit: contain;
								border-radius: 50%;
							}
						}

					}

				}

				.lianxi {
					width: 100%;
					display: flex;
					justify-content: left;
					align-items: center;
					padding-left: 50rpx;
					padding-right: 40rpx;
					margin-top: 38rpx;

					.lianxiItem {
						display: flex;

						img {
							width: 18px;
							height: 18px;
						}

						.tiemTxt {
							margin-left: 5rpx;
							padding-top: 5rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #797a7f;
						}
					}
				}
			}

			.time {
				margin-top: 22rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #b3b9c2;

			}

			.chattTime {
				margin-top: 50rpx;
			}

			.chatself {
				display: flex;
				flex-direction: row-reverse;
				width: 90%;
				margin-left: 5%;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
			}

			.chatother {
				display: flex;
				width: 90%;
				margin-left: 5%;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
			}

			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.chatbgvS {
				color: #FFFFFF;
				padding: 24rpx;
				max-width: calc(90% - 140rpx);
				background-color: #32B499;
				font-size: 24rpx;
				border-radius: 10px;

			}

			.chatbgvO {
				color: #FFFFFF;
				padding: 24rpx;
				max-width: calc(90% - 140rpx);
				background-color: #292A3F;
				font-size: 24rpx;
				border-radius: 10px;
			}
		}
	}

	.chatinput {
		position: fixed;
		bottom: 0rpx;
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;

		.inputtext {
			width: calc(100% - 80rpx - 50rpx - 38rpx);
			color: #FFFFFF;
			font-size: 28rpx;
		}

		::v-deep .u-upload {
			display: flex !important;
			flex-direction: column !important;
			flex: 0.15 !important;
		}
	}

	.loading_btn {
		width: 120rpx;
		line-height: 70rpx;
		background-color: #32B499;
		margin: 50rpx auto;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}
</style>